Code Playground

<body>
  <div id="bubbles">
        <div class="bubble x1"></div>
        <div class="bubble x2"></div>
        <div class="bubble x3"></div>
        <div class="bubble x4"></div>
        <div class="bubble x5"></div>
        <div class="bubble x6"></div>
        <div class="bubble x7"></div>
        <div class="bubble x8"></div>
        <div class="bubble x9"></div>
        <div class="bubble x10"></div>
</div>
  <div class="content"><svg id="submarine" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 677.21 358.19"><defs><style>.cls-1{fill:#d8bc8b;}.cls-1,.cls-2,.cls-3,.cls-4{stroke:#e79a7f;stroke-miterlimit:10;stroke-width:5px;}.cls-2{fill:#e9d196;}.cls-3{fill:#d4d8da;}.cls-4{fill:none;}</style></defs><title>Untitled-5</title><path class="cls-1" d="M978.64,467.44l-36,.1a50,50,0,0,1-50-49.74l-.25-85.53a50,50,0,0,1,49.67-50l36-.1a10.13,10.13,0,0,1,10.12,10.08S964,353.3,964.08,374.82s24.63,82.47,24.63,82.47A10.13,10.13,0,0,1,978.64,467.44Z" transform="translate(-314 -139)"/><path class="cls-2" d="M484.5,154.5h-53a10,10,0,0,0-10,10v6a10,10,0,0,0,10,10h35v90a12,12,0,0,0,12,12h4a12,12,0,0,0,12-12v-106A10,10,0,0,0,484.5,154.5Z" transform="translate(-314 -139)"/><circle class="cls-1" cx="165.5" cy="157.5" r="51"/><path class="cls-1" d="M414,494.5H743.26c17.83,2.6,63.66-21.74,103.49-50l-513.4,1.59C350.93,475.26,380.59,494.5,414,494.5Z" transform="translate(-314 -139)"/><path class="cls-2" d="M743.26,274.5H414c-53.64,0-97.53,49.5-97.53,110h0a119.2,119.2,0,0,0,16.85,61.6l513.4-1.59c12.71-9,24.81-18.43,35.19-27.49L882.4,339C838.09,308.17,762.18,274.5,743.26,274.5Z" transform="translate(-314 -139)"/><path class="cls-1" d="M915,374.5c0-9.29-13.31-22.14-32.6-35.54L881.94,417C901.51,399.93,915,384.09,915,374.5Z" transform="translate(-314 -139)"/><ellipse class="cls-3" cx="154.48" cy="218.24" rx="41.98" ry="41.76"/><ellipse class="cls-3" cx="284.27" cy="218.24" rx="41.98" ry="41.76"/><ellipse class="cls-3" cx="414.02" cy="217.26" rx="41.98" ry="41.76"/><path class="cls-4" d="M331.5,374.5" transform="translate(-314 -139)"/><path class="cls-4" d="M387.75,297.78s-16.07,6.83-26.18,16.72-21.37,34.77-21.37,34.77" transform="translate(-314 -139)"/><line class="cls-4" x1="20.61" y1="220.6" x2="18.39" y2="232.4"/><rect class="cls-2" x="92.5" y="2.5" width="24" height="50" rx="12" ry="12"/><line class="cls-4" x1="567.5" y1="199.5" x2="567.5" y2="278.5"/><line class="cls-4" x1="660.5" y1="162.5" x2="643.5" y2="210.5"/><line class="cls-4" x1="661.96" y1="157.72" x2="663.04" y2="154.28"/><line class="cls-4" x1="19.5" y1="307.5" x2="532.5" y2="305.5"/></svg>
  </div></body>

svg{
  height:200px;

}

.content{
 position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display:block;
}

.bubble {
    width: 30px;
    height: 30px;
    background: lightblue;
    border-radius: 200px;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;
    position: absolute;
}

.x1 {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.2;
    -webkit-animation: moveBubblesX 15s linear infinite, moveBubblesY 6s ease-in-out infinite alternate;
    -moz-animation: moveBubblesX 15s linear infinite, moveBubblesY 6s ease-in-out infinite alternate;
    -o-animation: moveBubblesX 15s linear infinite, moveBubblesY 6s ease-in-out infinite alternate;
}

.x2 {
    left: 200px;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0.5;
    -webkit-animation: moveBubblesX 25s linear infinite, moveBubblesY 8s ease-in-out infinite alternate;
    -moz-animation: moveBubblesX 25s linear infinite, moveBubblesY 8s ease-in-out infinite alternate;
    -o-animation: moveBubblesX 25s linear infinite, moveBubblesY 8s ease-in-out infinite alternate;
}
.x3 {
    left: 350px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.3;
    -webkit-animation: moveBubblesX 20s linear infinite, moveBubblesY 4s ease-in-out infinite alternate;
    -moz-animation: moveBubblesX 20s linear infinite, moveBubblesY 4s ease-in-out infinite alternate;
    -o-animation: moveBubblesX 20s linear infinite, moveBubblesY 4s ease-in-out infinite alternate;
}

.x4 {
    left: 470px;
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    transform: scale(0.75);
    opacity: 0.35;
    -webkit-animation: moveBubblesX 18s linear infinite, moveBubblesY 3s ease-in-out infinite alternate;
    -moz-animation: moveBubblesX 18s linear infinite, moveBubblesY 3s ease-in-out infinite alternate;
    -o-animation: moveBubblesX 18s linear infinite, moveBubblesY 3s ease-in-out infinite alternate;
}
.x5 {
    left: 150px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.3; 
    -webkit-animation: moveBubblesX 17s linear infinite, moveBubblesY 5s ease-in-out infinite alternate;
    -moz-animation: moveBubblesX 17s linear infinite, moveBubblesY 5s ease-in-out infinite alternate;
    -o-animation: moveBubblesX 17s linear infinite, moveBubblesY 5s ease-in-out infinite alternate;
}

.x6 {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.2;
    -webkit-animation: moveBubblesX 15s linear infinite, moveBubblesYOpposite 4s ease-in-out infinite alternate;
    -moz-animation: moveBubblesX 15s linear infinite, moveBubblesYOpposite 4s ease-in-out infinite alternate;
    -o-animation: moveBubblesX 15s linear infinite, moveBubblesYOpposite 4s ease-in-out infinite alternate;
}

.x7 {
    left: 200px;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0.5;
    -webkit-animation: moveBubblesX 21s linear infinite, moveBubblesYOpposite 3s ease-in-out infinite alternate;
    -moz-animation: moveBubblesX 21s linear infinite, moveBubblesYOpposite 3s ease-in-out infinite alternate;
    -o-animation: moveBubblesX 21s linear infinite, moveBubblesYOpposite 3s ease-in-out infinite alternate;
}
.x8 {
    left: 350px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.3;
    -webkit-animation: moveBubblesX 16s linear infinite, moveBubblesYOpposite 6s ease-in-out infinite alternate;
    -moz-animation: moveBubblesX 16s linear infinite, moveBubblesYOpposite 6s ease-in-out infinite alternate;
    -o-animation: moveBubblesX 16s linear infinite, moveBubblesYOpposite 6s ease-in-out infinite alternate;
}

.x9 {
    left: 470px;
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    transform: scale(0.75);
    opacity: 0.35;
    -webkit-animation: moveBubblesX 24s linear infinite, moveBubblesYOpposite 5s ease-in-out infinite alternate;
    -moz-animation: moveBubblesX 24s linear infinite, moveBubblesYOpposite 5s ease-in-out infinite alternate;
    -o-animation: moveBubblesX 24s linear infinite, moveBubblesYOpposite 5s ease-in-out infinite alternate;
}
.x10 {
    left: 150px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.3; 
    -webkit-animation: moveBubblesX 17s linear infinite, moveBubblesYOpposite 5s ease-in-out infinite alternate;
    -moz-animation: moveBubblesX 17s linear infinite, moveBubblesYOpposite 5s ease-in-out infinite alternate;
    -o-animation: moveBubblesX 17s linear infinite, moveBubblesYOpposite 5s ease-in-out infinite alternate;
}

#bubbles { 
  height: 100%;
  padding: 150px 0;
}

body{
  background-color:#97BEDB;
  overflow:hidden;
}

#submarine{
    animation: MoveUpDown 10s easeInOut infinite;
    -webkit-animation: MoveUpDown 10s ease-In-Out infinite;
 transform-origin: 50% 50%;
}

@keyframes MoveUpDown {
     0% {transform: none;}
    25% {transform:  translateY(-50px) translateX(20px) rotate(5deg);}
    50% {transform:  translateY(25px) translateX(-25px) rotate(-5deg);}
    75% {transform:  translateY(-50px) translateX(25px) rotate(-5deg);}
    100% {transform:  translateY(0px) translateX(0px) rotate(0deg);}
}

@-webkit-keyframes moveBubblesX { 
    0% { 
        left: -1%;
    }
    100% { 
        left: 101%;
    }
}

@-webkit-keyframes moveBubblesY { 
    0% { 
        margin-top:0px;
    }
    100% { 
        margin-top:150px;
    }
}

@-webkit-keyframes moveBubblesYOpposite { 
    0% { 
        margin-top:0px;
    }
    100% { 
        margin-top:-100px;
    }
}

Frontend Forever App